<template>
  <div class="tag-box" @click="close">
    <div class="tag" @click="stop">
      <div class="card-body">
        <div class="tag-item" v-for="(item, index) in list" :key="index">
          <div class="tag-title">{{ item.title }}</div>
          <div class="tag-right">
            <div
              class="tag-select-item"
              v-for="(items, index) in item.children"
              :key="index"
            >
              <div
                class="tag-name"
                :class="{ 'tag-has': items.value.length > 0 }"
              >
                {{ items.title
                }}{{
                  items.value.length > 0 ? "（" + items.value.length + "）" : ""
                }}
              </div>
              <el-select
                v-model="items.value"
                multiple
                collapse-tags
                style="width: 160px"
                placeholder=""
                @change="onChange"
              >
                <el-option
                  v-for="itemMi in items.children"
                  :key="itemMi.value"
                  :label="itemMi.label"
                  :value="itemMi.value"
                  :disabled="itemMi.disabled"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="tag-bo" v-if="hasSelectList.length > 0">
          <div class="tag-bo-left">已选</div>
          <div class="tag-bo-right">
            <div
              class="tag-bo-item"
              v-for="(item, index) in hasSelectList"
              :key="index"
              :title="item"
            >
              <div>{{ item }}</div>
              <img
                src="~img/tag-close.png"
                alt=""
                style="cursor: pointer"
                @click="clearOne(item)"
              />
            </div>
          </div>
        </div>
        <!-- <div class="tag-btn">
          确定
        </div> -->
        <!-- <div class="line-ge"></div> -->
      </div>
    </div>
    <div class="determine_box">
      <div class="determine" @click="goDetermine">确 定</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenList:[],
      active: 1,
      value2: [],
      hasList: [],
      list: [
        {
          title: "基础筛选:",
          value: "",
          children: [
            // {
            //   title: "产业环节",
            //   value: "",
            //   children: [
            //     {
            //       value: "选项101",
            //       label: "电子专用材料",
            //       disabled: false,
            //     },
            //     {
            //       value: "选项102",
            //       label: "制药设备",
            //       disabled: false,
            //     },
            //     {
            //       value: "选项103",
            //       label: "主动元件",
            //       disabled: false,
            //     },
            //     {
            //       value: "选项103",
            //       label: "被动元件",
            //       disabled: false,
            //     },
            //     {
            //       value: "选项103",
            //       label: "重点应用",
            //       disabled: false,
            //     },
            //   ],
            // },
            {
              title: "征信评分",
              value: "",
              children: [
                {
                  value: "200",
                  label: "200-400分",
                  disabled: false,
                },
                {
                  value: "400",
                  label: "401-500分",
                  disabled: false,
                },
                {
                  value: "501",
                  label: "501-600分",
                  disabled: false,
                },
                {
                  value: "601",
                  label: "601-700分",
                  disabled: false,
                },
                {
                  value: "700",
                  label: "700分以上",
                  disabled: false,
                },
              ],
            },
          ],
        },
        {
          title: "产业标签",
          value: "",
          children: [
            {
              title: "产业结构",
              value: "",
              children: [
                {
                  value: "年营收超百万企业",
                  label: "年营收超百万企业",
                  disabled: false,
                },
                {
                  value: "注册资本超百万企业",
                  label: "注册资本超百万企业",
                  disabled: false,
                },
                {
                  value: "用工人数超百人企业",
                  label: "用工人数超百人企业",
                  disabled: false,
                },
              ],
            },
            {
              title: "产业规模",
              value: "",
              children: [
                {
                  value: "大型",
                  label: "大型",
                  disabled: false,
                },
                {
                  value: "中型",
                  label: "中型",
                  disabled: false,
                },
                {
                  value: "小微型",
                  label: "小微型",
                  disabled: false,
                },
              ],
            },
            {
              title: "科技企业",
              value: "",
              children: [
                {
                  value: "高新技术企业",
                  label: "高新技术企业",

                  disabled: false,
                },
                {
                  value: "专精特新",
                  label: "专精特新",
                  disabled: false,
                },
                {
                  value: "科技型中小",
                  label: "科技型中小",
                  disabled: false,
                },
                {
                  value: "创新型中小",
                  label: "创新型中小",
                  disabled: false,
                },
                {
                  value: "民营科技企业",
                  label: "民营科技企业",
                  disabled: false,
                },
                {
                  value: "工程技术研究中心",
                  label: "工程技术研究中心",
                  disabled: false,
                },
                {
                  value: "瞪羚企业",
                  label: "瞪羚企业",
                  disabled: false,
                },
                {
                  value: "技术先进性服务企业",
                  label: "技术先进性服务企业",
                  disabled: false,
                },
                {
                  value: "企业技术中心",
                  label: "企业技术中心",
                  disabled: false,
                },
                {
                  value: "技术创新示范企业",
                  label: "技术创新示范企业",
                  disabled: false,
                },
                {
                  value: "独角兽企业",
                  label: "独角兽企业",
                  disabled: false,
                },
                {
                  value: "科技企业孵化器",
                  label: "科技企业孵化器",
                  disabled: false,
                },
                {
                  value: "创新创业领军人才",
                  label: "创新创业领军人才",
                  disabled: false,
                },
                {
                  value: "创新型领军企业",
                  label: "创新型领军企业",
                  disabled: false,
                },
                {
                  value: "民营企业创新100强",
                  label: "民营企业创新100强",
                  disabled: false,
                },
                {
                  value: "高成长创新型培育企业",
                  label: "高成长创新型培育企业",
                  disabled: false,
                },
              ],
            },
            {
              title: "技术创新",
              value: "",
              children: [
                {
                  value: "近1个月有新增专利",
                  label: "近1个月有新增专利",
                  disabled: false,
                },
                {
                  value: "近1个月有新增软件著作权",
                  label: "近1个月有新增软件著作权",
                  disabled: false,
                },
                {
                  value: "近3年平均每年新增专利数不少于10",
                  label: "近3年平均每年新增专利数不少于10",
                  disabled: false,
                },
                {
                  value: "新增发明专利数量连续2年正增长",
                  label: "新增发明专利数量连续2年正增长",
                  disabled: false,
                },
              ],
            },
            {
              title: "业务扩张",
              value: "",
              children: [
                {
                  value: "近一年有外地新设分支机构企业",
                  label: "近一年有外地新设分支机构企业",
                  disabled: false,
                },
                {
                  value: "近一年有外地设立全资子公司",
                  label: "近一年有外地设立全资子公司",
                  disabled: false,
                },
                {
                  value: "近半年有5个城市以上存在招聘岗位的企业",
                  label: "近半年有5个城市以上存在招聘岗位的企业",
                  disabled: false,
                },
                {
                  value: "近半年有跨城市招聘的企业",
                  label: "近半年有跨城市招聘的企业",
                  disabled: false,
                },
                {
                  value: "近一年营业收入增长率超100%",
                  label: "近一年营业收入增长率超100%",
                  disabled: false,
                },
                {
                  value: "近一年有新增对外投资企业%",
                  label: "近一年有新增对外投资企业%",
                  disabled: false,
                },
                {
                  value: "近一年招投标项目增长率超50%",
                  label: "近一年招投标项目增长率超50%",
                  disabled: false,
                },
              ],
            },
            {
              title: "用工规模",
              value: "",
              children: [
                {
                  value: "社保人数超百人",
                  label: "社保人数超百人",
                  disabled: false,
                },
                {
                  value: "在招职位大于30人",
                  label: "在招职位大于30人",
                  disabled: false,
                },
                {
                  value: "近一年用工人数增长率超50%",
                  label: "近一年用工人数增长率超50%",
                  disabled: false,
                },
              ],
            },
            {
              title: "企业融资",
              value: "",
              children: [
                {
                  value: "近期有融资",
                  label: "近期有融资",
                  disabled: false,
                },
                {
                  value: "IPO企业",
                  label: "IPO企业",
                  disabled: false,
                },
                {
                  value: "近一年贷款金额增长率超50%",
                  label: "近一年贷款金额增长率超50%",
                  disabled: false,
                },
              ],
            },
            {
              title: "风险特征",
              value: "",
              children: [
                {
                  value: "近一年有行政处罚企业",
                  label: "近一年有行政处罚企业",
                  disabled: false,
                },
                {
                  value: "近一年有涉诉企业",
                  label: "近一年有涉诉企业",
                  disabled: false,
                },
                {
                  value: "近一年存在不良贷款企业",
                  label: "近一年存在不良贷款企业",
                  disabled: false,
                },
                {
                  value: "营业收入较前三年平均下降60%",
                  label: "营业收入较前三年平均下降60%",
                  disabled: false,
                },
                {
                  value: "近三年营业收入连续下降10%以上",
                  label: "近三年营业收入连续下降10%以上",
                  disabled: false,
                },
                {
                  value: "列入失信被执行名单企业",
                  label: "列入失信被执行名单企业",
                  disabled: false,
                },
                {
                  value: "近一年存在股权质押企业",
                  label: "近一年存在股权质押企业",
                  disabled: false,
                },
                {
                  value: "近一年存在不动产抵押企业",
                  label: "近一年存在不动产抵押企业",
                  disabled: false,
                },
                {
                  value: "近一年存在不动产查封企业",
                  label: "近一年存在不动产查封企业",
                  disabled: false,
                },
              ],
            },
            {
              title: "政策扶持",
              value: "",
              children: [
                {
                  value: "获得政府扶持和奖励企业",
                  label: "获得政府扶持和奖励企业",
                  disabled: false,
                },
                {
                  value: "获得项目奖励企业",
                  label: "获得项目奖励企业",
                  disabled: false,
                },
                {
                  value: "获得政府补贴企业",
                  label: "获得政府补贴企业",
                  disabled: false,
                },
                {
                  value: "获得减税免税企业",
                  label: "获得减税免税企业",
                  disabled: false,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  computed: {
    hasSelectList() {
      let needList = [];
      this.list.forEach((val) => {
        val.children.forEach((pre) => {
          needList.push(...pre.value);
        });
      });
      // this.hasList = needList
      return needList;
      // console.log(need, 'need');
    },
  },
  mounted() {
    // this.list = [{ "title": "产业经营", "value": "", "children": [{ "title": "产业产值", "value": ["选项101", "选项102", "选项103"], "children": [{ "value": "选项101", "label": "黄金糕101" }, { "value": "选项102", "label": "双皮奶102" }, { "value": "选项103", "label": "蚵仔煎103" }] }, { "title": "产业用工", "value": ["选项104", "选项105"], "children": [{ "value": "选项104", "label": "龙须面104" }, { "value": "选项105", "label": "北京烤鸭105" }] }] }, { "title": "产业用工", "value": "", "children": [{ "title": "产业产值", "value": ["选项3", "选项2", "选项1"], "children": [{ "value": "选项1", "label": "黄金糕" }, { "value": "选项2", "label": "双皮奶" }, { "value": "选项3", "label": "蚵仔煎" }] }, { "title": "产业结构", "value": [], "children": [{ "value": "选项4", "label": "龙须面" }, { "value": "选项5", "label": "北京烤鸭" }] }, { "title": "产业规模", "value": ["选项6", "选项7"], "children": [{ "value": "选项6", "label": "龙须面" }, { "value": "选项7", "label": "北京烤鸭" }] }, { "title": "产业标签", "value": ["选项8", "选项9"], "children": [{ "value": "选项8", "label": "龙须面" }, { "value": "选项9", "label": "北京烤鸭" }] }, { "title": "经营能力", "value": ["选项11", "选项10"], "children": [{ "value": "选项10", "label": "龙须面" }, { "value": "选项11", "label": "北京烤鸭" }] }] }]

    this.initInfo();
  },
  methods: {
    goDetermine(){
      this.$emit("goTagMul", this.screenList);
    },
    initInfo() {},

    close() {
      this.$parent.showTag = false;
    },
    stop(e) {
      e.stopPropagation(); // 阻止事件冒泡即可
    },
    change(index) {
      this.active = index;
      this.$nextTick(() => {
        this.init_1();
      });
    },
    checkInfo() {
      console.log(JSON.stringify(this.list), "list");
    },
    clearOne(item) {
      this.removeFromTree(this.list, item);
      this.onChange();
    },
    removeFromTree(tree, valueToRemove) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        // 如果当前节点的 value 是一个数组，并且包含要删除的值，则从数组中移除该值
        if (Array.isArray(node.value)) {
          node.value = node.value.filter((value) => value !== valueToRemove);
        }
        // 递归调用 removeFromTree 函数处理当前节点的子节点
        if (Array.isArray(node.children)) {
          node.children = this.removeFromTree(node.children, valueToRemove);
        }
      }
      return tree.filter((node) => {
        return (
          node.value.length > 0 ||
          (Array.isArray(node.children) && node.children.length > 0)
        );
      });
    },
    onChange() {
      let needList = [];
      this.list.forEach((val) => {
        val.children.forEach((pre) => {
          needList.push(...pre.value);
        });
      });
      if (needList.length > 5) {
        this.list.forEach((pre) => {
          pre.children.forEach((val) => {
            val.children.forEach((per) => {
              if (val.value) {
                if (val.value.includes(per.value)) {
                  per.disabled = false;
                } else {
                  per.disabled = true;
                }
              }
            });
          });
        });
        this.$message.error("最多选择6个筛选条件");
      } else {
        this.list.forEach((pre) => {
          pre.children.forEach((val) => {
            val.children.forEach((per) => {
              per.disabled = false;
            });
          });
        });
      }
      this.screenList=needList
      // this.$emit("goTagMul", needList);
    },
  },
};
</script>

<style lang="scss" scoped>
.tag-box {
  // position: absolute;
  // width: 100%;
  // height: 100%;
  // z-index: 100;
  // top: 0;
  // left: 0;
  // background: rgba(0, 0, 0, 0.5);
  margin-top: -20px;

  .tag {
    position: relative;
    // width: 1128px;
    // height: 766px;
    // margin: 60px auto 0;
    // border: 1px solid red;

    .card-body {
      // background: rgba(2, 47, 131, 0.95);
      height: 100%;
      // box-shadow: 1px 1px 20px 3px rgba(0, 100, 199, 0.6) inset,
      //   -1px -1px 20px 3px rgba(0, 100, 199, 0.6) inset;
      // background: #0c276a;
      // opacity: 0.96;
      // padding: 0 30px;
      // padding-top: 30px;

      .tag-item {
        // margin: 20px;
        padding: 8px;
        // display: flex;
        // height: 40px;
        // border-bottom: 1px solid rgba(14, 64, 147, 1);
        // align-items: center;

        .tag-title {
          font-size: 20px;
          font-family: Alibaba PuHuiTi;
          font-weight: 600;
          color: #ceecff;
          // margin-bottom: 7px;
        }

        .tag-right {
          display: flex;
          flex-wrap: wrap;
        }

        .tag-select-item {
          position: relative;
          // margin: 8px;
          margin: 7px 7px 0 0;

          .tag-name {
            width: 160px;
            position: absolute;
            // top: 50%;
            // transform: translateY(-50%);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            // border-radius: 18px;
            // left: 14px;
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #6ed4fa;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            padding-left: 20px;

            &.tag-has {
              color: #fff;
              background: rgba(0, 115, 235, 1);
            }
          }
        }
      }

      .tag-bo-item {
        position: relative;
        width: 30%;
        height: 38px;
        border: 1px solid #15adf2;
        background: rgba(15, 75, 164, 1);
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #6ed4fa;
        margin: 12px 12px 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 2px;

        > div {
          height: 38px;
          text-align: center;
          flex: 1;
          margin-right: 30px;
          line-height: 38px;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; // 默认不换行；
        }

        img {
          position: absolute;
          right: 10px;
          width: 20px;
          height: 20px;
          cursor: pointer;
          // margin-left: auto;
        }

        // background-image: url('~img/tag-select.png');
      }

      // .line-ge {
      //   width: 100%;
      //   height: 1px;
      //   background: red;
      // }
    }
  }

  .tag-bo {
    background: #163581;
    border: 1px solid #1f71e0;
    box-shadow: 0px 1px 8px 1px rgba(0, 3, 39, 0.48);
    margin: 8px;
    padding-bottom: 15px;

    .tag-bo-left {
      font-size: 20px;
      font-family: Alibaba PuHuiTi;
      font-weight: 600;
      color: #ceecff;
      margin: 10px 0 0 19px;
    }

    .tag-bo-right {
      display: flex;
      flex-wrap: wrap;
      // border: 1px solid red;
      margin-left: 13px;
    }
  }

  .tag-btn {
    cursor: pointer;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    right: 20px;
    width: 217px;
    height: 44px;
    background: linear-gradient(0deg, #2981ee 0%, #135ccf 100%);
    border-radius: 6px 6px 6px 6px;
    font-size: 20px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #d7f4ff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  ::v-deep .el-icon-close {
    display: none;
  }

  ::v-deep .el-tag {
    display: none;
  }

  ::v-deep .el-input__inner {
    background-color: transparent !important;
    border-color: rgba(5, 176, 245, 1);
    border-radius: 0;
  }
}
.determine_box{
  width: 100%;
  position: absolute;
  bottom: 20px;
  margin: auto;
  display: flex;
  justify-content: center;
  // background-color: red;
}
.determine {
  width: 217px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  background: linear-gradient(0deg, #2981ee 0%, #135ccf 100%);
  border-radius: 4px 4px 4px 4px;
  cursor: pointer;
}
</style>
